import Controller from './Controller';

export default class OptionController extends Controller {

	constructor( parent, object, property, options, config) {
		if(config == null) config = {} ;
		super( parent, object, property, 'option', 'div', config );

		this.$select = document.createElement( 'select' );
		this.$select.setAttribute( 'aria-labelledby', this.$name.id );

		this.$display = document.createElement( 'div' );
		this.$display.classList.add( 'display' );

		this._values = Array.isArray( options ) ? options : Object.values( options );
		this._names = Array.isArray( options ) ? options : Object.keys( options );

		//选项是否为颜色
		this.optionCallback = config.optionCallback ;
		this._names.forEach( name => {
			const $option = document.createElement( 'option' );
			$option.innerHTML = name;
			if(this.optionCallback != null)
				this.optionCallback(this.$select,$option,name) ;
			this.$select.appendChild( $option );
		} );

		//按钮
		if(config != null && config.btnEnable === true){
			let btnTxt = config.btnTxt ;
			if(btnTxt != null && btnTxt != "" && config.btnClick != null){
				this.$button1 = document.createElement( 'button' );
				this.$button1.innerHTML = btnTxt;
				this.$button1.classList.add("optionBtn") ;

				this.$button1.addEventListener( 'click', e => {
					e.preventDefault();
					config.btnClick.call(null, this.getValue(),this,object);
				} );
			}
		}

		this.$select.addEventListener( 'change', () => {
			this.setValue( this._values[ this.$select.selectedIndex ] );
			this._callOnFinishChange();
		} );

		this.$select.addEventListener( 'focus', () => {
			this.$display.classList.add( 'focus' );
		} );

		this.$select.addEventListener( 'blur', () => {
			this.$display.classList.remove( 'focus' );
		} );

		this.$widget.appendChild( this.$select );
		this.$widget.appendChild( this.$display );
		if(this.$button1 != null)
			this.$widget.appendChild( this.$button1 );

		this._appendEndDomHtml(config.endHtml) ;
		// let endHtml = config.endHtml ;
		// if(endHtml != null && endHtml != ""){
		// 	this.$span = document.createElement( 'span' );
		// 	this.$span.classList.add("lilInlineEndSpan") ;
		// 	this.$widget.appendChild( this.$span );
		//
		// 	this.$span.innerHTML = endHtml ;
		// }


		this.$disable = this.$select;

		this.updateDisplay();

	}

	updateDisplay() {
		let value = this.getValue();
		if(value == null) {
			this.$select.selectedIndex = -1;
			this.$display.innerHTML = '' ;
			return this ;
		}
		const index = this._values.indexOf( value );
		this.$select.selectedIndex = index;
		this.$display.innerHTML = index === -1 ? value : this._names[ index ];
		return this;
	}

	updateOptions( options){
		this._values = Array.isArray( options ) ? options : Object.values( options );
		this._names = Array.isArray( options ) ? options : Object.keys( options );

		this.$select.options.length=0 ;
		this._names.forEach( name => {
			const $option = document.createElement( 'option' );
			$option.innerHTML = name;
			if(this.optionCallback != null)
				this.optionCallback(this.$select,$option,name) ;
			this.$select.appendChild( $option );
		} );
		this.updateDisplay() ;
	}

	setStyle(style){
		if(style == null) return this ;
		if(this.$select == null) return this;
		this.$select.setAttribute("style",style) ;
		this.$display.setAttribute("style",style) ;
		return this ;
	}

	addClass(clazz){
		if(clazz == null || clazz == "") return this ;
		if(this.$select == null) return this;
		this.$select.classList.add(clazz) ;
		this.$display.classList.add(clazz) ;
		return this ;
	}

	removeClass(clazz){
		if(clazz == null || clazz == "") return this;
		if(this.$select == null) return this;
		this.$select.classList.remove(clazz) ;
		this.$display.classList.remove(clazz) ;
		return this ;
	}

	addDisplayClass(clazz){
		if(clazz == null || clazz == "") return this ;
		if(this.$display == null) return this;
		this.$display.classList.add(clazz) ;
		return this ;
	}

	removeDisplayClass(clazz){
		if(clazz == null || clazz == "") return this;
		if(this.$display == null) return this;
		this.$display.classList.remove(clazz) ;
		return this ;
	}
}
